import Taro from '@tarojs/taro'
import { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text } from '@tarojs/components'
import CTopbar from '../../components/CTopbar/index'
import CImage from '../../components/CImage/index'
import wechatPay from '@/assets/wechatPay.jpg'
import Err from '@/assets/qrCode.png'
import './index.scss'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
/**
 * 支付结果页
 */
class PaymentResults extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      orderType: 0,
      id: 0,
      price: 0,
      isErr: 0,
    }
  }
  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    // isErr  支付是否失败  1 失败了   2支付成功了
    // orderType 订单类型 1测试卷 2线上  3咨询师  4 线下
    //  id 商品id
    const { orderType, id, price, isErr } = Current.router?.params

    this.setState({
      orderType: Number(orderType),
      id: Number(id),
      price: Number(price),
      isErr: Number(isErr),
    })
  }

  goto_video_detail() {
    const { id } = this.state
    Taro.navigateTo({
      url: '/pages/College/CourseDetails/index?id=' + id,
    })
  }
  gotoTestPage() {
    const { id } = this.state
    Taro.navigateTo({
      url: '/pages/Home/TestQuestions/index?id=' + id,
    })
  }

  // 前往订单
  goto_order() {
    // orderType 订单类型 1：测评 2：课程
    // tabType  栏目：0：待支付（支付失败走） 1：已支付（支付成功走）
    // isErr  1:失败   0 没有失败
    const { isErr } = this.state
    const tabType = isErr === 1 ? 0 : 1

    Taro.navigateTo({
      url: '/pages/My/MyOrder/index?tabType=' + tabType,
    })
  }
  gotoHome() {
    Taro.switchTab({
      url: '/pages/Home/index',
    })
  }
  render() {
    const { orderType, id, price, isErr } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='支付' showBack></CTopbar>
        </View>
        <View className='content'>
          <View className='imgWrap'>
            <CImage src={isErr === 1 ? Err : wechatPay} circle></CImage>
          </View>
          <Text className='titleInfo'>{isErr === 1 ? '订单支付失败' : '订单支付成功'}</Text>
          <Text className='priceInfo'>￥{price}</Text>
        </View>
        <View className='pay_type'>
          <Text>付款方式</Text>
          <Text>微信支付</Text>
        </View>

        <View className='btnWrap'>
          <Text className='btnItem' onClick={this.goto_order.bind(this)}>
            查看订单
          </Text>
          {orderType == 2 ? (
            isErr === 1 ? (
              ''
            ) : (
              <Text className='btnItem' onClick={this.goto_video_detail.bind(this)}>
                立即观看
              </Text>
            )
          ) : orderType == 4 ? (
            <Text className='btnItem' onClick={this.gotoHome.bind(this)}>
              返回首页
            </Text>
          ) : isErr === 1 ? (
            ''
          ) : (
            <Text className='btnItem' onClick={this.gotoTestPage.bind(this)}>
              进入测评
            </Text>
          )}
        </View>
      </View>
    )
  }
}

export default PaymentResults
